
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/xq.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/right.css" />
		<link rel="stylesheet" type="text/css" href="css/tops.css" />
		<link rel="stylesheet" type="text/css" href="css/vipFeilei.css" />
	</head>

	<body>
		
		<div class="shop-tops">
			<p id="shouye">首页 > 太平鸟男装专场 > 连帽男士秋季长外套男士风衣潮</p>
		</div>
		<!--外部布局-->
		<div id="store">
			<!--左边图-->
			<div class="s-left">
				<div id="s-Img">
					<img src="img/img01_420x530.jpg" id="j-imgs" />
					<div id="imgBig"></div>
				</div>
				<div class="s-Img-lie">
					<ul id="j-Img-hang">
						<li><img src="img/img01_95x120.jpg" data-img="img/img01_" /></li>
						<li><img src="img/img02_95x120.jpg" data-img="img/img02_" /></li>
						<li><img src="img/img03_95x120.jpg" data-img="img/img03_" /></li>
					</ul>
				</div>
				<div class="bottom-tips">
					<p>商品编码：B2BE6336258</p><span class="bottom-t1">收藏商品</span><span class="bottom-t2">分享到：</span>
				</div>
			</div>

			<!--右边选择框-->
			<div class="s-right">
				<div class="sr-tittle"></div>
				<dl class="sr-dl"><dt class="sr-dt">配送</dt>
					<p class="sr-p change">请选择省市区</p>
				</dl>
				<dl class="sr-dl"><dt class="sr-dt">运费</dt><span class="change  free">免运费</span><span class="change">（订单满288免运费）</span></dl>
				<dl class="sr-dl">
					<dt class="sr-dt" id="sr-chima">尺码</dt>
					<dd class="sr-dd">
						<ul class="sr-ul">
							<li class="change">S</li>
							<li class="change">M</li>
							<li class="change">L</li>
							<li class="change">XL</li>
							<li class="change">XXL</li>
						</ul>
					</dd>
				</dl>
				<dl class="sr-dl"><dt class="sr-dt" id="sr-chima">数量</dt>
					<div class="nums">
						<img src="img/num.png" />
					</div>
				</dl>
				<div class="jiaru">
					<img src="img/jiaru.png" />
				</div>
				<div class="tisp">
					<img src="img/botto.png" />
				</div>
			</div>
		</div>
		<div class="tuxian">
			<img src="img/xiantu.png"/>
		</div>
	</body>
	<script type="text/javascript">
		var imgBig = document.getElementById("imgBig");
		var img = document.getElementById("j-imgs"); //中图的img
		var ul = document.getElementById("j-Img-hang"); //得到ul
		var li = ul.getElementsByTagName("li");
		window.onload = function() {
			for(var i = 0; i < li.length; i++) {
				li[i].onclick = function() {
					var dimg = this.children[0].getAttribute("data-img");
					img.src = dimg + "420x530.jpg";
					imgBig.style.backgroundImage = "url(" + dimg + "1100x1390.jpg)";
				}
			}
			var sImg = document.getElementById("s-Img");
			sImg.onmousemove = function(event) {
				imgBig.style.display = "block";
				var x = event.offsetX;
				var y = event.offsetY;
				var imgx = x / 420 * 100 + "%";
				var imgy = y / 530 * 100 + "%";
				imgBig.style.backgroundPositionX = imgx;
				imgBig.style.backgroundPositionY = imgy;
			}
			sImg.onmouseout = function() {
				imgBig.style.display = "none";
			}
		}
	</script>

</html>